<template>
  <div>
    <el-card>
      <div slot="header">
        <span>商品添加</span>
      </div>

      <el-form
        :rules="rules"
        ref="formData"
        label-width="80px"
        :model="goodsAdd"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goodsAdd.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="category">
          <el-select
            placeholder="请选择商品分类"
            v-model="goodsAdd.category"
            clearable
          >
            <el-option v-for="(v,i) in goodsCategories" :key="i" :label="v" :value="v"></el-option>
            <!-- <el-option label="套餐自选区" value="套餐自选区"></el-option>
            <el-option label="撸烤串" value="撸烤串"></el-option>
            <el-option label="满减专区" value="满减专区"></el-option>
            <el-option label="营养适配" value="营养适配"></el-option>
            <el-option label="千万销量" value="千万销量"></el-option>
            <el-option label="炒饭系列" value="炒饭系列"></el-option>
            <el-option label="鲜炒盖饭" value="鲜炒盖饭"></el-option>
            <el-option
              label="收藏门店超值专享"
              value="收藏门店超值专享"
            ></el-option>
            <el-option label="热销榜88" value="热销榜88"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number
            size="small"
            v-model="goodsAdd.price"
            :min="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>

        <!-- 图片上传 -->
        <el-form-item label="商品图片" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            action="http://sell.h5.itsource.cn:8087/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="goodsAdd.imgUrl" :src="goodsAdd.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 文本框 -->
        <el-form-item label="商品描述" prop="goodsDesc">
          <el-input
            v-model="goodsAdd.goodsDesc"
            type="textarea"
            class="text-area"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="success" class="fff gree" @click="handleAddGoods"
            >添加商品</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { api_goods_add } from "@/apis/goods";
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      goodsAdd: {
        name: "",
        category: "",
        price: 1,
        goodsDesc: "",
        imgUrl: "",
      },
      rules: {
        name: {
          required: true,
          message: "请输入商品名称",
          trigger: "blur",
        },
        category: {
          required: true,
          message: "请添加商品分类",
          trigger: "blur",
        },
        price: {
          required: true,
          message: "请输入商品价格",
          trigger: "blur",
        },
        imgUrl: {
          required: true,
          message: "请添加商品图片",
          trigger: "blur",
        },
        goodsDesc: {
          required: true,
          message: "请添加商品描述",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
	// 调用vuex中获取商品已启用分类数据
    ...mapState("goods", ["goodsCategories"]),
  },
  created() {
    // 调用vuex中获取商品已启用分类请求函数
    // this.$store.dispatch("shop/$_GOODS_CATE")
    this.$_GOODS_CATE();
  },
  methods: {
    ...mapActions("goods", ["$_GOODS_CATE"]),

    // 添加商品
    handleAddGoods() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          const res = await api_goods_add(this.goodsAdd);
          if (res.data.code == 0) {
            this.$router.push("/goods");
          }
        }
      });
    },

    // 上传图片之前的钩子
    beforeAvatarUpload(file) {
      // file.type === 'image/jpeg';
      const isJPG = /(png|jpeg|webp)/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 / 1024 < 20;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/png/webp 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isJPG && isLt2M;
    },
    // 上传成功时钩子函数
    async handleAvatarSuccess(res) {
      let { code, msg, imgUrl } = res;
      if (code == 0) {
        this.goodsAdd.imgUrl = imgUrl;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 205px;
}

.text-area {
  width: 205px;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
